<template>
  <view class="main">
    <video id="myVideo" class="cover" style="width: 100%;" :src="information.video"
           @error="videoErrorCallback" v-if="information.video"/>
    <image v-else class="cover" :src="information.cover"></image>

    <view class="title">{{ information.title }}</view>

    <parser :html="information.detail" class="content"/>
  </view>
</template>

<script>
import Api from "@/utils/Api";
import Parser from "@/components/jyf-parser/jyf-parser";

export default {
  name: "information-info",
  components: {Parser},
  data() {
    return {
      id: null,
      information: {}
    }
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.id = options.id
    this.getInfo()
  },
  methods: {
    getInfo() {
      Api.getNewsDetail(this.id).then(res => {
        this.information = res
      })
    },
    videoErrorCallback(e) {
      console.log(e)
    },
  },
  onPullDownRefresh() {
    this.getInfo();
  },
  onShareAppMessage(info) {
    return {
      imageUrl: this.information.cover,
    }
  },
}
</script>

<style scoped lang='scss'>
.main {
  padding: r(20px);
  background-color: white;
  min-height: 100vh;
}

.cover {
  height: r(418px);
  width: 100%;
  border-radius: r(10px);
}

.title {
  font-size: r(34px);
  font-weight: 500;
  color: #333333;
  margin: r(40px 0);
}

.content {
  font-size: r(32px);
  color: #909090;
}

</style>